<!DOCTYPE html>
<html>

<head>
    <title>Map</title>
    <link rel="stylesheet" href="https://openlayers.org/en/v4.6.5/css/ol.css" type="text/css">
    <script src="https://openlayers.org/en/v4.6.5/build/ol.js"></script>
    <style>
        html,
        body,
        .map {
            height: 100vh;
            overflow: hidden;
            margin: 0;
            padding: 0;
        }

        canvas {
            filter: blur(4px);
        }
    </style>
</head>

<body>
    <div id="map" class="map"></div>
    <script>
        var view = new ol.View({
            center: [12697197.43594459, 2576636.732056208],
            zoom: 16
        });
        var map = new ol.Map({
            layers: [
                new ol.layer.Tile({
                    source: new ol.source.XYZ({
                        url: 'https://webrd0{1-4}.is.autonavi.com/appmaptile?style=8&x={x}&y={y}&z={z}&lang=zh_cn&size=1&scale=1'
                    }),
                })
            ],
            target: 'map',
            view: view
        });
    </script>
</body>

</html>